<template>
    <div class="text_list_box">
        <el-table
            ref="tableRef"
            :data="tableData"
            height="504"
            max-height="550"
            tooltip-effect="light"
            class="table_box"
            header-row-class-name="table_header_title">
            <el-table-column width="60px" align="center">
                <template #default="scope">
                    <div style="display: flex; align-items: center">
                        <el-checkbox v-model="scope.row.isCheck" @change="chooseText(scope.row)"></el-checkbox>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="标题" align="'center'">
                <template #default="scope">
                    <div class="line3">{{ scope.row.title || '--' }}</div>
                </template>
            </el-table-column>
            <el-table-column label="创建人" align="'center'">
                <template #default="scope">
                    <div class="line3">{{ scope.row.creater_name || '--' }}</div>
                </template>
            </el-table-column>
            <el-table-column label="创建时间" align="'center'">
                <template #default="scope">
                    <div class="line3">{{ scope.row.start_date || '--' }}</div>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script lang="ts" setup>
import { ref, reactive, watch, computed } from 'vue';

const props = defineProps(['chooseData', 'pageData']);
const emit = defineEmits(['getData']);
const textArr = [];
const tableData = ref();
const chooseText = (item: any) => {
    tableData.value.forEach((item, inx, data) => {
        item.isCheck = false;
    });
    item.isCheck = true;
    if (item.isCheck) {
        item.absolute_url = item.qr_code_link.substring(6);
        textArr.push(item);
    } else {
        const index = textArr.findIndex(ite => ite.id === item.id);
        if (index > -1) {
            textArr.splice(index, 1);
        }
    }
    emit('getData', {
        type: 'form',
        typeStr: 'collect',
        data: textArr
    });
};
watch(
    () => props.pageData,
    val => {
        tableData.value = val;
    }
);
</script>

<style lang="scss" scoped>
.text_list_box {
    width: 100%;

    .line3 {
        overflow: hidden;
        text-overflow: ellipsis;
        width: 100%;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        word-break: break-all;
    }
}
</style>
<style lang="scss">
.text_list_box {
    .el-table--scrollable-y ::-webkit-scrollbar {
        display: none;
    }

    .table_header_title {
        th.el-table__cell {
            background: #f9f9f9;
            padding: 10px 0;
        }
    }
}
</style>
